<!--添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

    jQuery 操作 CSS
    jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
    addClass() - 向被选元素添加一个或多个类
    removeClass() - 从被选元素删除一个或多个类
    toggleClass() - 对被选元素进行添加/删除类的切换操作
    css() - 设置或返回样式属性
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script>
        $(document).ready(function() {
            $("button#btn1").click(function() {
                alert("Text: " + $("#test").text());
            });
            $("button#btn2").click(function() {
                alert("HTML: " + $("#test").html());
            });
            $("button#btn3").click(function() {
                $("p").prepend("<b>Prepended text</b>. ");
            });
            $("button#btn4").click(function() {
                $("ol").prepend("<li>Prepended item</li>");
            });
        });
    </script>
    <script>
        function appendText() {
            var txt1 = "<button>Text.</button>"; // 以 HTML 创建新元素
            var txt2 = $("<button></button>").text("Text."); // 以 jQuery 创建新元素
            var txt3 = document.createElement("button");
            txt3.innerHTML = "Text."; // 通过 DOM 来创建文本
            $("#appendText").append(txt1, txt2, txt3); // 追加新元素
        }
    </script>

    <script>
        function afterText() {
            var txt1 = "<b>I </b>"; // 以 HTML 创建元素
            var txt2 = $("<i></i>").text("love "); // 通过 jQuery 创建元素
            var txt3 = document.createElement("big"); // 通过 DOM 创建元素
            txt3.innerHTML = "jQuery!";
            $("img").after(txt1, txt2, txt3); // 在 img 之后插入新元素
        }
    </script>

    <script>
        $(document).ready(function() {
            //jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
            //该参数可以是任何 jQuery 选择器的语法。
            //下面的例子删除 class="italic" 的所有 <p> 元素： 
            $("button#buttondiv1").click(function() {
                $("p").remove(".italic");
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $("button#buttondiv2").click(function() {
                $("#div2").empty();
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("h1,h2,p").removeClass("blue");
            });
        });
    </script>
    <style type="text/css">
        .important {
            font-weight: bold;
            font-size: xx-large;
        }
        
        .blue {
            color: blue;
        }
    </style>
</head>

<body>
    <p id="test">这是段落中的<b>粗体</b>文本。</p>
    <button id="btn1">显示文本</button>
    <button id="btn2">显示 HTML</button>
    <button id="btn3">添加文本</button>
    <button id="btn4">添加列表项</button>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <p id="appendText">This is a paragraph.</p>
    <button onclick="appendText()">追加文本</button>
    <img src="../resource/abc.png" alt="W3School Logo" />
    <br><br>
    <button onclick="afterText()">在图片后面添加文本</button>

    <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
        This is some text in the div.
        <p class="italic">This is a paragraph in the div.</p>
        <p>This is another paragraph in the div.</p>
    </div>

    <br>
    <button id="buttondiv1">删除 div 元素</button>

    <div id="div2" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
        This is some text in the div.
        <p>This is a paragraph in the div.</p>
        <p>This is another paragraph in the div.</p>
    </div>

    <br>
    <button id="buttondiv2">清空 div 元素</button>

    <h1 class="blue">标题 1</h1>
    <h2 class="blue">标题 2</h2>
    <p class="blue">这是一个段落。</p>
    <p>这是另一个段落。</p>
    <br>
    <button>从元素上删除类</button>
</body>

</html>